<script setup>
import { useFloating, autoUpdate, offset, flip, shift } from "@floating-ui/vue";
import { bindingHideMenu, bindingEvent } from '../dropmenu/_dropdown.js';
import _ from "lodash";
import { ref, onMounted, onBeforeUnmount } from 'vue'
const root = ref(null)
const current = ref(null)
const floating = ref(null)
const open = ref(false)
const { floatingStyles } = useFloating(current, floating, {
    placement: "right-start",
    middleware: [offset(0), flip(), shift()],
    whileElementsMounted: autoUpdate,
});
bindingHideMenu(current, floating, open)
</script>
<template>
    <div class="d-inline-block" ref="root">
        <span ref="current" @click="open = true">
            <slot name="refrence"></slot>
        </span>
        <span ref="floating" :style="floatingStyles" v-if="open" class="dropdown shadow-lg rounded-3">
            <span class="dropdown-body">
                <slot name="content"></slot>
            </span>

        </span>
    </div>
</template>
